1.选择器 -------------------------------------------------------------------------------
.xx 
p[x^~|*$  ------  加=""]
*										存在串--并不是满足正则匹配原则--多个
=										只有这个属性
~										多个属性 存在一个这个属性（匹配单词) 
^										单个属性以这个开始以这个开始就行 
*|										选择多个属性以这个开始并且是连字符分割的（-)或没有连字符但是只是有一个 
*										存在就 行多个属性 
$ 	/*					*/				^的相反以结尾往前扫
#x 
x xx 						---选择内部所有的相关类型
xx 							---选择这个元素
xx>xx                       ---选择自孩子
xx,xx 						---并列
xx+xx     					---紧接在后面的元素
xx~yy 						---前面是xx元素的每个yy元素
---------------------------------------------------------------------------------------
2.伪元素 
所有的伪类都是判断判断性的 只有满足什么条件才能实现
-----------------事件类型------------------------------- 
*link 				--将样式添加到为访问的连接中					击前的样式 用于连接 
*visible 			--将样式添加到访问过的连接中					点击后 链接
*active  	     	--当元素被激活的时候	点击为松开的时候			
hover 				--当鼠标悬浮在样式上的时候					鼠标滑过
hover: 															会覆盖active的相同属性
fouce 				--当元素获得焦点的时候						选择获得焦点的元素   主要用于表单元素
-------text文档节点选择类型-----解析过程是一层一层的解析进行的----------------------------------------
first-letter指定第一个字母 first-line指定第一行  	主要用在p标签上等有文字操作的标签上
													可扩展属性包括::
													font properties
													color properties 
													background properties
													margin properties
													padding properties
													border properties
													text-decoration
													vertical-align (only if float is 'none')
													text-transform
													line-height
													float
													clear
------------------节点插入类型------------------------------------------------------------
after before 	---作用于设置的元素的前面																生成的元素什么都什么都要自己进行书写   在之前之后加入一个
	----例子清除浮动(1.结尾处加空div标签 clear:both )	
	----(2..clearfix:after{content:".";display:block;visibility:hidden;height:0;clear:both;})
	----(3.overflow:)----元素bfc化--																					元素 使用context 插入文字内容（text节点)并且声明属性
------------------元素/子元素选择器类型   只对element节点有用  text节点无效-----------------------------------------------------------------------
first-child last-child only-child					应用于子标签上 并且是夫元素的表示第一个最后一个唯一一个
first-of-type last-of-type only-of-type 			应用在子标签上指定是相同类型中父元素中的第一个最后一个唯一一个  elementsss 
nth-child(n) nth-last-child(n)						应用于子标签上 选择与元素中第n个或者到时第n个孩子
nth-of-type(n) nth-last-of-type(n)					应用在子标签上表示同类型中父元素中第n个元素 倒数第n个元素
//--这两个属性之前没办法加东西
root 												选择文档根元素
empty 												选择没有内容子元素的元素--text节点也算作内容 <p></p>这种的

not（n): 											对每个非n元素进行选择
::selection 										表示被用户选中高亮的文字元素	只可以应用于少数的CSS属性：color, background, cursor,和outline。
target: 											表示被作为锚点的时候应用的样式
--主要针对于表单元素
display: 											选择每一个禁用的元素
check: 																				
out-of-range										用于表单验证  匹配值在指定区间之外的-对应的表单 input元<input type="number" min="5" max="10" value="17" />
in-range											用于表单验证  匹配值在指定区间之内的input元素	
read-write											用于匹配可读及可写的元素	无readonly
read-only											用于匹配设置 "readonly"（只读） 属性的元素
optional											用于匹配可选的输入元素表单元素中如果没有特别设置 required 属性即为 optional 属性。optional 选择器只适用于表单元素: input, select 和 textarea。
required											用于匹配设置了 "required" 属性的元素
valid												用于匹配输入值为合法的元素
invalid												用于匹配输入值为非法的元素
-----------------------------------------------------------------
1.背景类 css1 -5 css3-3 -8 p {
	//background-前缀:8
	缩写 color position-(left top button right 百分比  或者px ) size(指定图像的大小) repeat-图像重复 origin(原点 指定图像使用的绘制块 padding border concent) clip(指定图像绘制的位置) (指定图像的滚动方法 scroll fixed) image
	colod 
	img 
	attachment(fixed scroll local) ---设计出背景暂停的状态使用fixed时候 orgin失效并使用 border-box
	repeat(no-repeat) 
	position //基础 background 前缀
	//size 属性可以使用百分比  实现
	size(cover(最大填充 最大边占满整个屏幕) contain最小便占满整个屏幕     % width, height)/(border padding context) 
	orgin--padding-box context border(与position属性相关连指定 position 取值的参考为值 attachmeng不是fixed) 
	background-clip --指定背景超出那一块进行裁剪 border-box padding-box context-box
	background: repeating-linear-gradient(45deg,rgba(255,0,0,0) 10% ,yellow 20%);
	background: linear-gradient(angle, color-stop1 10%, color-stop2...);//第一个参数 使用70deg 或者left bottom --表示从左下角开始   
	background: radial-gradient(center, shape size, start-color, ..., last-color); //径向渐变
	//注意这两个属性都能在颜色后面使用...position (xxx.px  xxx.%)
	//它可以取值 circle 或 ellipse 。默认值为 ellipse(椭圆) 。
		我们可以使用size参数定义径向渐变的大小。
				径向渐变的大小可以取四个值：
				closest-side  最近边
				farthest-side 
				closest-corner 最近角
				farthest-corner
	//属性还能指定相关的渐变方法
	background: repeating-linear-gradient(45deg,rgba(255,0,0,0) 10% ,yellow 20%);
	repeating-linear-gradient()和 repeating-radial-gradient()可以重复梯度。-
				---除了颜色选择不同其余的大致相同- 颜色可以使用color 14px  14%
				---指定一个颜色从xxx到xxx
}
2.文本类 6+3+2 p {
	text前缀:
	基本7 color vertraly-align  decoration加线 blink line-through underline overline 
						indent-缩进元素首行em text-shadow-文本阴影同 box-shadow见下 
	transform - capp up low --文字字母大小写
	text-overflow: ;				文字溢出被裁减添加省略号
										相关属性:
											clip-----修剪文本。
											ellipsis-显示省略符号来代表被修剪的文本。
											string---使用给定的字符串来代表被修剪的文本。
	
	排版类 3 
	text-align: 			明文本在原来的页面中的水平对齐方法(left right center justifly--两端对齐方法-将文字直接的平铺在整个页面中);
	vertraly-align:相关属性声明垂直对齐 baseline	默认。元素放置在父元素的基线上。--可以使用px值
									sub	垂直对齐文本的下标。
									super	垂直对齐文本的上标
									理解基线对齐和空白幽灵节点
									top	把元素的顶端与行中最高元素的顶端对齐
									text-top	把元素的顶端与父元素字体的顶端对齐
									middle	把此元素放置在父元素的中部。
									bottom	把元素的顶端与行中最低的元素的顶端对齐。
									text-bottom	把元素的底端与父元素字体的底端对齐。
	letter-spacing: ;		--字符间的距离
	word-break: normal|break-all只要不够就换行|keep-all在适合的地方进行换行;自动换行的处理办法
	word-wrap: normal|break-word 字符太长一行装不下就换行,否则和keep-all相同;
	word-spacing: ;			--单词间的距离--空格把
	line-height: ;			--行高
	direction: ;				--定义书写的方向 rtl right to left--定义文档流的书写方向
	white-space: ;相关属性    ---其实就类似一个<p>中有好几行的时候怎办---
								normal	默认。空白会被浏览器忽略。
								pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。---空格会合并
								nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
								pre-line---开头空白不保留但是换行
								pre-wrap----什么都保留同pre
}

3.字体类 5 p {
	//font 简单写法
	font---style variant weight size/line-height family--后两个必须的
	font-family: ;
	size: n;    --字体的大小--默认字体大小 谷歌浏览器 --最小12px 小于12就是12  火狐ie 默认16最小是0 负数或者无效使用默认值16
	style: 斜体, 倾斜字体 
	font-variant: ;smale-caps
	font-weight: 300; 设置字体的粗细
	允许使用自定义的字体
	@font-face {--使用自定义字体的时候需要先用这个载入一下
		font-family:;  --指定自定义属性的名称
		src: url();
		//可以设置一些文字的基本属性
		font-style: ;
		font-weight: ;
	}
6.2d

}

4.list列表类  3 p {
	list-style: type postion img;
	list-style: img type-列表样式查手册 position-inside outside--指定li前面的东西放在什么地方
}

5.border 3 p {
	border: width style color;
	border-style: ;
	width: ;
	color: ;
	----新属性
	border-radius;
	按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，
	则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
	border-image-source: 					url(img/123.jpeg);
	border-image-slice: ;					-裁剪图片形成九宫格从而是其适应边框 至于和clip 的rect 使用方法不同--#字形进行分割---設置圖像的分隔比
	border-image-outset: 120px;		----将边框背景想外进行偏移  上右下左四个属性
	border-image-width: 30px;			--设置边框的宽度   上右下左
	border-image-repeat: ;				可放两个值  角和中间  边框的图片样式 重复（repeated）、拉伸（stretched）或铺满（rounded）
	border-image: source slice width outset repeat;集合属性
}
6.表格类 {
	border-collapse: ;--联系上面   --使用单边框还是复合边框
						separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
						collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
	caption-side : ;--作用于标签<caption>top bottom -指定他的位置
	Empty-cells 是否在空的单元个周围绘制元素(是否显示空的单元格)
	border-spacing: ;  设置边框之间的间距 上右下左
	table-layout: ; 表格是否自适应fix auto 自适应  在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
			automatic	默认。列宽度由单元格内容设定。
			fixed	列宽由表格宽度和列宽度设定。
}
7.column类{----css3  的分列属性
	columns-集成属性 width+count
	count 		分成--多少列
	fill- 		暂时不支持
	gap-: ;		列间像素宽窄
	rule-   width style color---指定填充时候的样式  style-
											none	定义无边框。
											hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
											dotted	定义点状边框。在大多数浏览器中呈现为实线。
											dashed	定义虚线。在大多数浏览器中呈现为实线。
											solid	定义实线。
											double	定义双线。双线的宽度等于 border-width 的值。
											groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
											ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
											inset	定义 3D inset 边框。其效果取决于 border-color 的值。
											outset	定义 3D outset 边框。其效果取决于 border-color 的值。
											inherit	规定应该从父元素继承边框样式。
	span; 		规定在父元素的自孩子中要夸多少列
	width
}
8.定位 p {
	float: ;
	position: ;     绝对 相对 固定 static
	clip: ;				裁剪绝对定位 rect(a,b,c,d)--只能使用矩形--裁剪绝对定位元素
	clear: ;			---指定左侧或者右侧不能有浮动元素
	//清楚清楚浮动的方法
	.clear{clear:both; height: 0; line-height: 0; font-size: 0}--空div方法
	.over-flow{overflow: auto; //也可以设置hiddenzoom: 1; //zoom: 1; 处理兼容性问题}
	.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}  
	top left bottom right ;相对于绝对定位进行位置的定位
}
9.css box{
	box-shadow: ;//向盒模型中添加一个阴影
	box-shadow: h-shadow v-shadow blur模糊距离 spread阴影尺寸-上下左右扩大 color inset|outset-使用内部阴影还是外部阴影;
	box-sizing: ;--定义了盒模型的hight和width 的范围是否包好border 火context--测试只有在右width或者height的时候才有用
	定义了--使用width和height的时候包括什么
	resize: ;--定义用户是否可以向自由的拖动大小
}
10.盒模型相关类{
	flex display flex-inline元素可以自适应 但是因为父元素的属性限制导致(父元素的属性会控制子元素的行为) 所以体现不出来
							弹性和模型 默认水平有值就撑开空间（必须满足内容能沾满) 高占满父容器 
							横向溢出自适应 纵向溢出 (能满足的时候尽量满足-width height自动分配以满足空间) 没办法的情况下就溢出
							总而言之就是尽量满足不行就溢出
							以上是默认属性
							内部布局 遵从外部文档流
							align-content 调整行的布局类似于align-item 相当于应用于元素的justily-centext
							其他属性 --对盒子而言里面内容怎么排列 对里面的属性没有用
							order 为弹性和模型进行排序 可以是负数 数值小的在前面/
							完美居中 margin auto
							内部布局 遵从外部文档流
-----
	display: ;--声明盒子的种类类型
						none	此元素不会被显示。
						block	此元素将显示为块级元素，此元素前后会带有换行符。
						inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
						inline-block	行内块元素。（CSS2.1 新增的值）
						list-item	此元素会作为列表显示。
						table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
						inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
						table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
						table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
						table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
						table-row	此元素会作为一个表格行显示（类似 <tr>）。
						table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
						table-column	此元素会作为一个单元格列显示（类似 <col>）
						table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）---这个属性很有用默认自居中
						table-caption	此元素会作为一个表格标题显示（类似 <caption>）
						inherit	规定应该从父元素继承 display 属性的值。
	弹性盒模型-----------------------------------------------
	//集成属性
	flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;;--弹性盒模型子元素分配空间的问题
	flex-basis: flex-basis 属性用于设置或检索弹性盒伸缩基准值(初始的默认值)。。;auto ||px--宽度的默认值
	flex-direction: ;row column (row-reverse两者都有表示相反的属性);--表示弹性盒模型的排列方式--从左到右还是从上倒下-注意默认属性是不会自动换行的
	flex-wrap: ;
				nowrap	默认值。规定灵活的项目不拆行或不拆列。
				wrap	规定灵活的项目在必要的时候拆行或拆列。
				wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。--排列方法从左到右的从下开始
	flex-flow:direction+wrap;前两个的复合属性
	//比例属性
	flex-grow: number; 扩张比在原有空间的基础上将剩余空间进行按照比例进行分配
	flex-shrink: number;收缩比 以不够的空间按照比例进行收缩
	justify-content:;应用于父元素 作用于子元素 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。使用 align-content 属性对齐交叉轴上的各项（垂直）。
	 				//排列的方法 从上开始 一行一直排排不动了就换下一行
	 				centext集中在中间    --- 一行占满了会跑到全图的中间
	 				start集中在开始的地方 
	 				end集中在结束的地方 
	 				space-between（间距左右不留空)如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start
	 				space-around（间距留空)
	align-content: ;声明在父元素使用在子元素     容器内必须有多行的项目，该属性才能渲染出效果。
					stretch	默认值。项目被拉伸以适应容器。---此属性异常之想absulte的top left bottom right ==0的时候	
					center	项目位于容器的中心。	
					flex-start	项目位于容器的开头。	
					flex-end	项目位于容器的结尾。	
					space-between	项目位于各行之间留有空白的容器内。
					space-around	项目位于各行之前、之间、之后都留有空白的容器内。
	align-items: ;定义在父元素声明子元素在自己的-在原来的属性上进行加工-(可读区 类似absult使用margin auto的时候)域怎么排列
					stretch	默认。 拉伸元件以适应容器。	
					center	中心元素在容器内。	
					flex-start	位置元素在容器的开头。	
					flex-end	位置元素在容器的末端。	
					baseline	位置元素在容器的基线。
	align-self: ;上面属性的单独的化
	order: ;-设置弹性盒元素的出现次序
	margin-相关  ----- 注意auto 是这个元素剩下的空间来计算的
	padding-相关
	//margin -- 和pading 的100% 是以父元素的宽度做计算的
	//设置盒模型最大能扩大到多大
	max-height: ; 属性不包括填充，边框，或页边距！
	max-width: ;  属性不包括填充，边框，或页边距！
	//设置盒模型最小的缩小到多大
	min-height: ;
	min-width: ;
}

11.图像类 {
	设置width和height的时候将会将会对图片进行自动的缩放
	background: url(img_navsprites.gif) 0 0;
	滤镜----filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
	opacity: ;--设置div 透明度级别 0.5; i8 之前 用filer;父元素的opacity:0.5，子元素opacity:0.2，那么子元素实际的opacity=0.5x0.2=0.1
}

12.媒体类型 自适应 @media screen {
	p.test {
		font-family: verdana, sans-serif;
		font-size: 14px;
	}
}
////这些转换父元素发生变化会连带这子元素同时变化   占用文档流的   尽量声明为绝对定位
13.css2d{
		transform: ; 			Transform属性应用于元素的2D或3D转换----会跳出overflow:hidden;  fix----
											这个属性允许你将元素旋转，缩放，移动，倾斜等。
		transform-origin: x-axis y-axis z-axis;  //% width height 
											transform-Origin属性允许您更改转换元素的位置。
											2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
		transform-style :;		--flat-2d展示-所有的3d效果将会别积压成2d的效果
											preserve-3d-使用3d展示--只是表明当前的效果使用3d效果
-----------------------2d转换函数-----------------------------------------------------
		matrix(n,n,n,n,n,n)		定义 2D 转换，使用六个值的矩阵。
		translate(x,y)				定义 2D 转换，沿着 X 和 Y 轴移动元素。
		translateX(n)					定义 2D 转换，沿着 X 轴移动元素。
		translateY(n)					定义 2D 转换，沿着 Y 轴移动元素。
		scale(x,y)						定义 2D 缩放转换，改变元素的宽度和高度。 改变的是倍数
		scaleX(n)							定义 2D 缩放转换，改变元素的宽度。
		scaleY(n)							定义 2D 缩放转换，改变元素的高度。
		rotate(angle)					定义 2D 旋转，在参数中规定角度。---z轴旋转		
		skew(x-angle,y-angle)				定义 2D 倾斜转换，沿着 X 和 Y 轴。 --错位
		skewX(angle)					定义 2D 倾斜转换，沿着 X 轴。
		skewY(angle)					定义 2D 倾斜转换，沿着 Y 轴。
}
14.css3d{
	transform: ; 					Transform属性应用于元素的2D或3D转换。
												这个属性允许你将元素旋转，缩放，移动，倾斜等。
	transform-origin: x-axis y-axis z-axis;
												transform-Origin属性允许您更改转换元素的位置。
												2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
	transform-style :;				--flat-2d展示-所有的3d效果将会别积压成2d的效果
														preserve-3d-使用3d展示
														定义 3D 转换元素的透视视图。
	perspective number 						声明一个旋转舞台   默认0(auto)  透视里面的深度
	perspective-origin 10% 10%;		声明视窗的位置声明视点在浏览器那个地方进行了查看元素 只有在 perspective属性不是 auto||0才有用 声明焦点的位置可以为负数 
	backface-visibility 					hidden visible 图片旋转的背面是否可见
	
	-------------------变化函数-----------------------------------------
		matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
		translate3d(x,y,z)							定义 3D 转化。--平移
		translateX(x)										定义 3D 转化，仅使用用于 X 轴的值。
		translateY(y)										定义 3D 转化，仅使用用于 Y 轴的值。
		translateZ(z)										定义 3D 转化，仅使用用于 Z 轴的值。
		scale3d(x,y,z)									定义 3D 缩放转换。
		scaleX(x)												定义 3D 缩放转换，通过给定一个 X 轴的值。
		scaleY(y)												定义 3D 缩放转换，通过给定一个 Y 轴的值。
		scaleZ(z)												定义 3D 缩放转换，通过给定一个 Z 轴的值。
		rotate3d(x,y,z,angle)						定义 3D 旋转。
		rotateX(angle)									定义沿 X 轴的 3D 旋转。
		rotateY(angle)									定义沿 Y 轴的 3D 旋转。
		rotateZ(angle)									定义沿 Z 轴的 3D 旋转。
}
15.css -过度{
	------------过渡需要和 css伪类联动:hover主要---------------------------
	transition: property duration timing-function delay;--集成属性
	transition-property:; 								声明 进行过的属性 all 表示所有的属性
	transition-duration:5s; 							transition效果需要指定多少秒或毫秒才能完成
	transition-timing-function:; 						指定transition效果的转速曲线
																linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
																ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
																ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
																ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
																ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
																cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
	transition-delay:; 									定义transition效果开始前的等待时间
}
16.css 动画{
	animation: name duration timing-function delay
	iteration-count direction fill-mode play-state;		 	所有动画属性的简写属性，除了 animation-play-state 属性。	
	animation-name:;										规定都导入 @keyframes 动画的名称。	
	animation-duration:;									规定动画完成一个周期所花费的秒或毫秒。默认是 0。	
	animation-timing-function								规定动画的速度曲线。默认是 "ease"。	
																linear	动画从开始到结束具有相同的速度。	测试
																ease	动画有一个缓慢的开始，然后快，结束慢。	测试
																ease-in	动画有一个缓慢的开始。	测试
																ease-out	动画结束缓慢。	测试
																ease-in-out	动画具有缓慢的开始和慢的结束。	测试
																cubic-bezier(n,n,n,n)	在立方贝塞尔函数中定义速度函数。 可能的值是从0到1的数字值。	 
	animation-delay											规定动画何时开始。默认是 0。	
	animation-iteration-count								规定动画被播放的次数。默认是 1。	infinite无限循环播放
	animation-direction										规定动画是否在下一周期逆向地播放。默认是 "normal"。
																normal	默认值。动画按正常播放。	测试 »
																reverse	动画反向播放。	测试 »
																alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。	测试 »
																lternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
	animation-fill-mode										规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），
															要应用到元素的样式。	
																none：这是默认值，正是这个值，使得动画不会对动画等待和动画完成的元素样式产生改变；
																backwards：如果设置为这个值，那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式；
																forwards：如果设置为这个值，那么在动画结束后，元素的样式将设置为动画的最后一帧的样式；
																both：相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式。
	animation-play-state										规定动画是否正在运行或暂停。默认是 "running"。	paused暂停
	
	
	------声明动画的相关帧
	@keyframes myfirst{
		0%   {background: red;}---css动画声明每一帧的效果
		25%  {background: yellow;}
		50%  {background: blue;}
		100% {background: green;}
	}
}

17.other {
	clip: rect();/* 必须使用定位absolute或fixed定位是必须的 */
	clip-path: ;
	css3
属性是分开单独加载的
	counter-reset: ;					重置计数器
	counter-increment: ;			计数器加一--函数counter(reset名字);输出计数器的数值
	cursor: ;									鼠标指针 url使用自定义的鼠标指针
	max-height: ;
	max-width: ;
	visibility: collapse;			当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
	outline: ;-color style width border外中绘制边框？？？是否占据空间？？？---取消tableindex 设置的默认边框属性
	overflow: ;					---定义超出元素的范围应该干什么	
									相关属性		
				visible: ;			默认值。内容不会被修剪，会呈现在元素框之外。
				hidden					内容会被修剪，并且其余内容是不可见的。
				scroll					内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
				auto						如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
	//有隐藏的功能
	display: ;					-完全隐藏不占空间
	visibility: ;				-半隐藏占据空间visible hidding
}


//css 函数
在CSS2.1中counter()只能被使用在content属性上。用于输出计数器
div:after{content:attr(title);}//输出一个字符串
任何长度值都可以使用calc()函数进行计算。width:calc(100% - 50px);


